interface CircularProgressProps {
  entryRate: number
  verificationRate: number
  size?: number
  strokeWidth?: number
}

export function CircularProgress({ 
  entryRate, 
  verificationRate, 
  size = 100, 
  strokeWidth = 8 
}: CircularProgressProps) {
  const radius = (size - strokeWidth) / 2
  const circumference = radius * 2 * Math.PI
  const entryOffset = circumference - (entryRate / 100) * circumference
  const verificationOffset = circumference - (verificationRate / 100) * circumference

  return (
    <div className="relative" style={{ width: size, height: size }}>
      <svg
        className="transform -rotate-90"
        width={size}
        height={size}
        viewBox={`0 0 ${size} ${size}`}
      >
        {/* Background circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke="#e5e7eb"
          strokeWidth={strokeWidth}
          fill="transparent"
        />
        
        {/* Entry rate circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke="#3b82f6"
          strokeWidth={strokeWidth / 2}
          fill="transparent"
          strokeDasharray={circumference}
          strokeDashoffset={entryOffset}
          strokeLinecap="round"
          className="transition-all duration-300 ease-in-out"
        />
        
        {/* Verification rate circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius - strokeWidth / 2}
          stroke="#10b981"
          strokeWidth={strokeWidth / 2}
          fill="transparent"
          strokeDasharray={circumference}
          strokeDashoffset={verificationOffset}
          strokeLinecap="round"
          className="transition-all duration-300 ease-in-out"
        />
      </svg>
      
      {/* Center text */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="text-center">
          <div className="text-xs font-semibold text-gray-900">{entryRate}%</div>
          <div className="text-xs text-gray-500">{verificationRate}%</div>
        </div>
      </div>
    </div>
  )
} 